<template>
  <div class="gl-picker" data-gl-picker>
    <slot>
      <div class="gl-picker-default" @click="show = true">{{text || '请选择'}}</div>
    </slot>
    <div @touchmove.prevent class="gl-picker-bg" :class="{'picker-active': show}">
      <van-picker class="picker-inner" :columns="columns" @cancel="show = cancel()" @confirm="confirm" show-toolbar/>
    </div>
  </div>
</template>

<script>
  export default {
    name: "GlPicker",
    data() {
      return {
        columns: ['test', 'test1', 'test2', 'test3'],
        show: false,
        text: '',
      }
    },
    watch: {
    },
    methods: {
      confirm(){
        this.show = false;
      },
      cancel(){
        return false;
      },
    }
  }
</script>

<style lang="less">
  .gl-picker[data-gl-picker] {
    .gl-picker-default {
      padding: .5rem;
      display: inline-block;
      vertical-align: middle;
      font-size: 1rem;
      line-height: 1rem;
      border-radius: 2rem;
      border: .03rem #ddd dashed;
    }
    .gl-picker-bg {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 999;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, .3);
      .picker-inner {
        position: absolute;
        bottom: 0;
        width: 100%;
      }
    }
  }
</style>
